<%@ page language="java"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html lang="en">
<head>
    <base href="<%=basePath%>">
    <title>工序模板</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>js/bootstrap-3.3.6/dist/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/bootstrapValidator.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/mydialog.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/style.css"/>
    <script type="text/javascript" src="<%=basePath%>js/common/jquery-2.1.0.js" charset="utf-8"></script>

    <script type="text/javascript" src="<%=basePath%>js/common/dialog.3.1.min.js"></script>

<body>
<div id="index-hav2">
    <div class="index-hav-right" id="index-hav-right-clear">
        <div class="row">
            <div class="col-md-9">
                <span id="icon-house"> </span><span>首页</span>
                <span>></span><span>系统管理</span>
                <span>></span><span>工序模板</span>
            </div>
            <div class="bank-box">
                <div class="panel-heading">
                    <%--<h3 class="panel-title text-center">版本号 ${templatesCode } 模板修改</h3>--%>
                </div>
                <div class="col-md-12" style="border:0px solid red">

                    <div class="panel panel-default center" style="border:0px solid red">
                        <div class="panel-body" style="border:0px solid red">
                            <fieldset disabled>
                                <div class="form-group" style="border: 0px solid red;width: 50%;margin-left: 20px;">
                                    <div style="width:30%;float: left">
                                        <b>难易度:</b>
                                        <select class="form-control" id="levels">
                                            <option value="S" <c:if test="${templatesLevel == 'S'}">selected</c:if>>S
                                            </option>
                                            <option value="A" <c:if test="${templatesLevel == 'A'}">selected</c:if>>A
                                            </option>
                                            <option value="B" <c:if test="${templatesLevel == 'B'}">selected</c:if>>B
                                            </option>
                                            <option value="C" <c:if test="${templatesLevel == 'C'}">selected</c:if>>C
                                            </option>
                                        </select>
                                    </div>

                                    <div style="width:30%;float: left">
                                        <b>次型:</b>
                                        <select class="form-control" id="types">
                                            <option value="1" <c:if test="${templatesType == '1'}">selected</c:if>>1次型
                                            </option>
                                            <option value="2" <c:if test="${templatesType == '2'}">selected</c:if>>2次型
                                            </option>
                                        </select>
                                    </div>
                                </div>
                            </fieldset>
                            <form role="form"
                                  action="<%=path%>/system/workingProcedureTemplate/save/templates"
                                  id="defaultForm" method="post">
                                <table class="textTable center" id="mbTable"
                                       style="border:0px solid blue;width:90%;margin-left: 50px;">
                                    <tr>
                                        <th class="platform-start">序号</th>
                                        <th class="platform-start">工序名称</th>
                                        <th class="platform-start">工序精度</th>
                                        <th class="platform-start">参考耗时</th>
                                        <th class="platform-start">预计耗时</th>
                                        <th class="platform-start">耗时单位</th>
                                        <%--<th class="platform-start">难易度</th>--%>
                                        <%--<th class="platform-start">次型</th>--%>
                                        <th class="platform-start">上移</th>
                                        <th class="platform-start">下移</th>
                                        <th class="platform-start">删除</th>
                                    </tr>

                                    <c:forEach items="${templates }" var="ts" varStatus="r">

                                        <tr>
                                            <td><input type="hidden" name="id${r.index+1 }" class="form-control"
                                                       value="${ts.id }"/>
                                                <input type="hidden" name="code${r.index+1 }" class="form-control"
                                                       value="${ts.code }"/>
                                                <input type="hidden" name="sortNum${r.index+1 }" class="form-control"
                                                       value="${ts.sortNum }"/>
                                                    ${ts.sortNum }:
                                            </td>
                                            <td><input type="text" name="name${r.index+1 }" class="form-control"
                                                       id="name${r.index+1 }"
                                                       value="${ts.name }"/>
                                            </td>
                                            <td><input type="text" class="form-control" name="precisionNum${r.index+1 }"
                                                       id="precisionNum${r.index+1 }" value="${ts.precisionNum }"
                                            />
                                            </td>
                                            <td><input type="text" class="form-control"
                                                       name="referenceDate${r.index+1 }"
                                                       onkeyup="value=value.replace(/[^\d.]/g,'')"
                                                       onblur="value=value.replace(/[^\d.]/g,'')"
                                                       id="referenceDate${r.index+1 }" value="${ts.referenceDate }"/>
                                            </td>
                                            <td><input type="text" class="form-control" name="defTime${r.index+1 }"
                                                       onkeyup="value=value.replace(/[^\d.]/g,'')"
                                                       onblur="value=value.replace(/[^\d.]/g,'')"
                                                       id="defTime${r.index+1 }" value="${ts.defTime }"/></td>

                                            <td><select class="form-control input-sm mb15"
                                                        name="defTimeUnit${r.index+1 }"
                                                        id="defTimeUnit${r.index+1 }">
                                                <option value="小时"
                                                        <c:if test="${ts.defTimeUnit == '小时'}">selected</c:if>>小时
                                                </option>
                                                <option value="秒"
                                                        <c:if test="${ts.defTimeUnit == '秒'}">selected</c:if>>秒
                                                </option>
                                                <option value="分"
                                                        <c:if test="${ts.defTimeUnit == '分'}">selected</c:if>>分
                                                </option>
                                                <option value="天"
                                                        <c:if test="${ts.defTimeUnit == '天'}">selected</c:if>>天
                                                </option>
                                                <option value="月"
                                                        <c:if test="${ts.defTimeUnit == '月'}">selected</c:if>>月
                                                </option>
                                                <option value="年"
                                                        <c:if test="${ts.defTimeUnit == '年'}">selected</c:if>>年
                                                </option>
                                            </select>
                                                <input type="hidden" class="form-control input-sm mb15"
                                                       name="level${r.index+1 }" id="level${r.index+1 }"/>
                                                <input type="hidden" class="form-control input-sm mb15"
                                                       name="type${r.index+1 }" id="type${r.index+1 }"/>
                                            </td>
                                            <td><a id="shang" style="cursor:pointer;"
                                                   onclick="shangyi(${ts.sortNum })">
                                                <c:if test="${ts.sortNum != '1'}">↑</c:if></a></td>
                                            <td><a onclick="xiayi(${ts.sortNum })" style="cursor:pointer;">
                                                <b id="xiaId${r.index+1 }">
                                                    <c:if test="${ts.sortNum != templates.size()}">↓</c:if>
                                                </b>
                                            </a>
                                            </td>
                                            <td><a style="cursor:pointer;" onclick="del(${ts.id },this)">✘</a></td>

                                        </tr>

                                    </c:forEach>

                                </table>

                                <div class="col-sm-8 col-btn-12">
                                    <button type="button" class="search-form-btn-s btn btn-info"
                                            onclick="addMode()">
                                        添加＋
                                    </button>
                                    <button type="submit" class="btn btn-info" style="cursor:pointer;"
                                            onclick="levelAndType()">保存
                                    </button>
                                    <button type="button" class="btn btn-default"
                                            onclick="window.location.href='<%=path%>/system/workingProcedureTemplate/template/list'">
                                        返回
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

    <div id="gray-screen"></div>
</div>
</body>
<script type="text/javascript" src="<%=basePath%>js/validate/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="<%=basePath%>js/rem.js" charset="utf-8"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/bootstrapValidator.js"></script>
<script type="text/javascript" src="<%=basePath%>js/validate/zh_CN.js"></script>
<script type="text/javascript" src="<%=basePath%>js/bootstrap-3.3.6/dist/js/bootstrap.min.js" charset="utf-8"></script>
<script type="text/javascript">

    function levelAndType() {
        var level = $("#levels").val();
        var type = $("#types").val();
        var tabNode = document.getElementById("mbTable");
        var x = tabNode.rows.length;
        //将所有的都赋值为选中的
        for (var i = 1; i < x; i++) {
            $("#level" + i).val(level);
            $("#type" + i).val(type);
        }
    }

    function addMode() {
        var tables = $("#mbTable");
        var valuecode =${templatesCode };
        var tabNode = document.getElementById("mbTable");
        var x = tabNode.rows.length;
        var shang = '';
        var xia = '';
        if (x != 1) {
            shang = '↑';
        }
        var xianum = x - 1;
        $("#xiaId" + xianum).text("↓");
        var hiddens = '<tr><td><input type="hidden" name="id' + x + '" class="form-control" /> <input type="hidden" name="code' + x + '" class="form-control" value="' + valuecode + '"/> <input type="hidden" name="sortNum' + x + '" class="form-control"  value="' + x + '"/>  ' + x + ':</td>';

        var namenum = '<td><input type="text" name="name' + x + '" class="form-control" id="name' + x + '" /> </td> <td><input type="text" class="form-control" name="precisionNum' + x + '" id="precisionNum' + x + '" /> </td>';

        var referenceDate = '<td><input type="text" class="form-control" value="0" name="referenceDate' + x + '" id="referenceDate' + x + '" /></td>';

        var defTimes = '<td><input type="text" class="form-control" value="0" name="defTime' + x + '" id="defTime' + x + '" /></td>';

        var defTimeUnits = '<td><select class="form-control input-sm mb15" name="defTimeUnit' + x + '" id="defTimeUnit' + x + '">  <option value="天">天  </option>  <option value="秒">秒  </option>  <option value="分" >分  </option>   <option value="小时">小时   </option>  <option value="月">月 </option>  <option value="年" >年   </option>  </select>   <input type="hidden" class="form-control input-sm mb15" name="level' + x + '" id="level' + x + '"/> <input type="hidden" class="form-control input-sm mb15"  name="type' + x + '" id="type' + x + '"/> </td>  <td><a id="shang' + x + '" style="cursor:pointer;" onclick="shangyi(' + x + ')">' + shang + '</a></td> <td><a onclick="xiayi(' + x + ')" style="cursor:pointer;"><b id="xiaId' + x + '">' + xia + '</b></a></td> <td><a style="cursor:pointer;" onclick="delRow(this)">✘</a></td></tr>';

        tables.append(hiddens + namenum + referenceDate + defTimes + defTimeUnits);
    }

    function xiayi(x) {
        //下移动
        var code = $("#name" + x).val();
        var name = $("#precisionNum" + x).val();
        var defTime = $("#defTime" + x).val();
        var defTimeUnit = $("#defTimeUnit" + x).val();
        var level = $("#level" + x).val();//难易度
        var type = $("#type" + x).val();//type
        var referenceDate = $("#referenceDate" + x).val();//参考耗时

        var sele = document.getElementById("defTimeUnit" + x);
        var selelevel = document.getElementById("level" + x);
        var seletype = document.getElementById("type" + x);
        var sltypeindex = seletype.selectedIndex;
        var index = x + 1;
        var upcode = $("#name" + index).val();
        var upname = $("#precisionNum" + index).val();
        var updefTime = $("#defTime" + index).val();
        var uplevel = $("#level" + index).val();//难易度
        var uptype = $("#type" + index).val();//type
        var upreferenceDate = $("#referenceDate" + index).val();//参考耗时

        var updefTimeUnit = $("#defTimeUnit" + index).val();
        var upsele = document.getElementById("defTimeUnit" + index);
        var upselelevel = document.getElementById("level" + index);
        var upseletype = document.getElementById("type" + index);
        var upstypeindex = upseletype.selectedIndex;
        $("#name" + x).val(upcode);
        $("#precisionNum" + x).val(upname);
        $("#defTime" + x).val(updefTime);
        $("#referenceDate" + x).val(upreferenceDate);
        for (i = 0; i < sele.length; i++) {//给select赋值
            if (updefTimeUnit == sele.options[i].text) {
                sele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < selelevel.length; i++) {//给select赋值
            if (uplevel == selelevel.options[i].text) {
                selelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < seletype.length; i++) {//给select赋值
            if (upstypeindex == i) {
                seletype.selectedIndex = i;
                break;
            }
        }

        $("#name" + index).val(code);
        $("#precisionNum" + index).val(name);
        $("#defTime" + index).val(defTime);
        $("#referenceDate" + index).val(referenceDate);
        for (i = 0; i < upsele.length; i++) {//给select赋值
            if (defTimeUnit == upsele.options[i].text) {
                upsele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upselelevel.length; i++) {//给select赋值
            if (level == upselelevel.options[i].text) {
                upselelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upseletype.length; i++) {//给select赋值
            if (sltypeindex == i) {
                upseletype.selectedIndex = i;
                break;
            }
        }
    }

    function shangyi(x) {
        var code = $("#name" + x).val();
        var name = $("#precisionNum" + x).val();
        var defTime = $("#defTime" + x).val();
        var defTimeUnit = $("#defTimeUnit" + x).val();
        var level = $("#level" + x).val();//难易度
        var type = $("#type" + x).val();//type
        var referenceDate = $("#referenceDate" + x).val();//参考耗时

        var sele = document.getElementById("defTimeUnit" + x);
        var selelevel = document.getElementById("level" + x);
        var seletype = document.getElementById("type" + x);
        var stypeindex = seletype.selectedIndex;
        var index = x - 1;
        var upcode = $("#name" + index).val();
        var upname = $("#precisionNum" + index).val();
        var updefTime = $("#defTime" + index).val();
        var uplevel = $("#level" + index).val();//难易度
        var uptype = $("#type" + index).val();//type
        var upreferenceDate = $("#referenceDate" + index).val();//参考耗时

        var updefTimeUnit = $("#defTimeUnit" + index).val();
        var upsele = document.getElementById("defTimeUnit" + index);
        var upselelevel = document.getElementById("level" + index);
        var upseletype = document.getElementById("type" + index);
        var upstypeindex = upseletype.selectedIndex;

        $("#name" + x).val(upcode);
        $("#precisionNum" + x).val(upname);
        $("#defTime" + x).val(updefTime);
        $("#referenceDate" + x).val(upreferenceDate);
        for (i = 0; i < sele.length; i++) {//给select赋值
            if (updefTimeUnit == sele.options[i].text) {
                sele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < selelevel.length; i++) {//给select赋值
            if (uplevel == selelevel.options[i].text) {
                selelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < seletype.length; i++) {//给select赋值
            if (upstypeindex == i) {
                seletype.selectedIndex = i;
                break;
            }
        }

        $("#name" + index).val(code);
        $("#precisionNum" + index).val(name);
        $("#defTime" + index).val(defTime);
        $("#referenceDate" + index).val(referenceDate);
        for (i = 0; i < upsele.length; i++) {//给select赋值
            if (defTimeUnit == upsele.options[i].text) {
                upsele.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upselelevel.length; i++) {//给select赋值
            if (level == upselelevel.options[i].text) {
                upselelevel.selectedIndex = i;
                break;
            }
        }
        for (i = 0; i < upseletype.length; i++) {//给select赋值
            if (stypeindex == i) {
                upseletype.selectedIndex = i;
                break;
            }
        }
    }

    function del(id, index) {
        var flag = confirm("删除后将无法恢复,确定要删除?");
        if (flag) {
            $.ajax({
                type: "get",
                url: "<%=path%>/system/workingProcedureTemplate/delete/templates?id=" + id,
                dataType: "json",
                success: function (data) {
                    //得到当前所在行
                    var tabNode = document.getElementById("mbTable");
                    if (tabNode == null) {
                        return;//就不用执行以下的代码了
                    }
                    $(index).parent().parent().remove();//去掉删除那条
                    //重新刷新
                    $.ajax({
                        type: "post",
                        url: "<%=path%>/system/workingProcedureTemplate/save/templates",
                        data: $('#defaultForm').serialize(),
                        dataType: "json",
                        success: function (data) {
                            window.location.reload();
                        }
                    });
                }
            });
        } else {
            alert('已取消操作!');
        }
    }

    //删除行
    function delRow(x) {
        $(x).parent().parent().remove();
    }

</script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#defaultForm').bootstrapValidator({
            message: 'This value is not valid',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {}
        }).on('success.form.bv', function (e) {
            // Prevent form submission
            e.preventDefault();

            // Get the form instance
            var $form = $(e.target);

            // Get the BootstrapValidator instance
            var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data
            $.post($form.attr('action'), $form.serialize(), function (result) {

                if (result.message != undefined) {
                    var code = result.code;
                    var grayScreen = document.getElementById("gray-screen");
                    Dialog({
                        "msg": '<div class="D_alert">' + result.message + '</div>',
                        "title": "提示",
                        "showButtons": true,
                        "cancelButton": false,
                        "onComplete": function () {
                            if (code != 1) {
                                $("body").empty();
                                window.location.reload();
                            }
                        }
                    });
                } else {
                    window.location.reload();
                }
            }, 'json');
        });

        //清空搜索条件
        $(".clearForm").click(function () {
            $("#form").find("input").val("");
        });
    });
</script>
</html>